<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
	<title>“组团啦”杯荣誉信息</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css"/>
	<link rel="stylesheet" type="text/css" href="css/bootstrap-modal.css"/>
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/public.css" />
</head>
<body>
<section id="top-space"></section>
<article id="article">
	<header>
		<h1 class="text-center">组团啦杯英雄联盟8强赛（4强赛、决赛）</h1>
		<p class="team text-center"><span class="z-green">ASM-Zero</span>&nbsp;&nbsp;vs&nbsp;&nbsp;<span class="z-red">SUES</span></p>
	</header>
	<ul class="m-condition oh center-block">
		<li class="rec-parent text-center z-green">胜利
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</li>
		<li class="text-center">

		</li>
	</ul>
	<div class="wrapper center-block">
		<ul class="team-note">
			<li class="z-red"><span class="sq-red"></span>失败队伍</li>
			<li class="z-green"><span class="sq-green"></span>胜利队伍</li>
		</ul>
	</div>
</article>
<div class="wrapper center-block">
	<div id="honor-wrapper">
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>日期</th>
					<th>开始</th>
					<th>时长</th>
					<th>类型</th>
				</tr>
				<tr class="s-td">
					<td>03-14</td>
					<td>12:55</td>
					<td>24分钟</td>
					<td>匹配赛</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th colspan="2">小（大）龙</th>
					<th colspan="2">视野</th>
				</tr>
				<tr>
					<td>0（0）</td>
					<td>2（0）</td>
					<td>43%</td>
					<td>57%</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th colspan="2">人头比</th>
					<th colspan="2">金钱比</th>
				</tr>
				<tr>
					<td>0（0）</td>
					<td>2（0）</td>
					<td>43%</td>
					<td>57%</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
		<!--mvp-->
		<div class="mvp-box text-center">
			<img src="img/por-border.png" alt="" width="31%"/>
			<div class="portait-box oh beCircle" id="portait"><img src="img/portrait2.jpg" alt="" width="100%"/></div>
			<div class="slogon-box" id="slogon"><img src="img/MVP.png" width="100%"/></div>
		</div>
		<p class="text-center mvp-title">这里是姓名</p>
		<div class="row">
			<div class="col-xs-4 col-xs-offset-4">
				<div class="mvp-data rec-parent">
					<p>评分<span>12.5</span></p>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-4">
				<p class="text-center title">人头王</p>
				<div class="portait-s oh beCircle center-block">
					<img src="img/portrait2.jpg" alt=""/>
				</div>
				<p class="title-name z-green text-center">你今天充值了嘛</p>
				<div class="mvp-data rec-parent">
					<p>杀敌<span>8</span></p>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
			<div class="col-xs-4">
				<p class="text-center title">助攻王</p>
				<div class="portait-s oh beCircle center-block">
					<img src="img/portrait2.jpg" alt=""/>
				</div>
				<p class="title-name z-red text-center">你今天充值了嘛</p>
				<div class="mvp-data rec-parent">
					<p>助攻<span>8</span></p>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
			<div class="col-xs-4">
				<p class="text-center title">大富翁</p>
				<div class="portait-s oh beCircle center-block">
					<img src="img/portrait2.jpg" alt=""/>
				</div>
				<p class="title-name z-green text-center">你今天充值了嘛</p>
				<div class="mvp-data rec-parent">
					<p>金钱<span>12.5k</span></p>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
	</div>

</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var screenWidth=window.innerWidth,
			wrapperWidth=screenWidth*0.88;
	function setPortait(wrapperWidth,outerSize,innerSize){
		var	portait=document.getElementById("portait"),
				gapsize=(outerSize-innerSize)/2;
		portait.style.height=wrapperWidth*innerSize*0.01+"px";
		portait.style.top=wrapperWidth*gapsize*0.01+"px";
		portait.style.visibility="visible";
		//slogon
		(function(){
			$("#slogon").css({
				'top':wrapperWidth*outerSize*0.01*0.63+'px',
				'visibility':'visible'
			})
		})();
	};
	setPortait(wrapperWidth,31,26);
	countScrollHeight("article","honor-wrapper");
</script>

</body>
</html>
